import React, {useState, useEffect} from 'react'
import { useNavigate} from 'react-router-dom'
import SearchBar from '@c/SearchBar'
import { fetchCateLists} from '@a/cateLists'
import { Table, Button, Switch, Image, message, Modal } from 'antd';
import CateAdd from './components/CateAdd';
import CateUpdate from './components/CateUpdate';

 function CateLists() {
  const navigate = useNavigate()
// 搜索关键字和日期
const searchParams = {
  keyWord: '',
  start: '',
  end: ''
}
  const handleSearch = (params) => {
    searchParams.keyWord = params.keyWord;
    searchParams.start = params.range[0];
    searchParams.end = params.range[1];
    fetchCateLists({...searchParams}).then(res => {
      if (res.data.code === 200) {
        message.success('搜索成功',2, () => {
          navigate(0)
        })
      }
    })
   
       }
  

 // 搜索关键字和日期
 const [cates, setCates] = useState([])  //商品分类返回的数据
 const [page, setPage] = useState(1)  //第几页
 const [pageSize, setPageSize] = useState(10) //一页有多少条数据
 const [total, setTotal] = useState(0) //总共有多少条数据
const paginationChange = (page, pageSize) => {

setPage(page)
setPageSize(pageSize)
fetchCateLists({
  page,
  pageSize
}).then(res => {
  if (res.data.code === 200) {
    message.success('跳转成功',2, () => {
      navigate(0)
    })
  }
})
}
 //商品分类请求
 const fetchCateListss = (params) => {
  
   fetchCateLists(params).then(res => {

    if (res.data.code === 200) {
      
        setCates(res.data.data.lists)
        setTotal(res.data.data.total)
      
    }
  })
 
 }
 //商品分类请求
 useEffect(() => {
 
  fetchCateListss()
 }, []) //初始化激活一次
 //表格的列数据
 const columns = [
  {
    title: '分类名字',
    dataIndex: 'cateName',
    key: 'cateName',
  },
  {
    title: '分类图标',
    dataIndex: 'icon',
    key: 'icon',
    render: (value, row, index) => {
      return (
        <>
      <Image
    width={80}
    src={value}
  />
      </>
      )
      
    }
  },
  {
    title: '是否启动',
    dataIndex: 'enable',
    render: (value, row, index) => {
      const onChange = (checked) => {
       
      };
      return(
        <>
        <Switch defaultChecked={value} onChange={onChange} />
        </>
      )
    },
    key: 'enable',
  },
  {
    title: '操作',
    render: (value, row, index) => {
      
      return (
        <>
        <Button type="primary" danger onClick={
          () => {
            
            Modal.confirm({
              title: '删除商品',
              content: '该操作会彻底删除商品,确定继续吗?',
              onOk: () => {
                fetchCateLists({id: row.id}).then(res => {
                  if(res.data.code === 200) {
                    message.success('删除成功', 2, () => {
                      navigate(0)
                    })
                  }
                })
              }
            })
          }
        }>删除</Button>
         
        <Button onClick = {
          () => {
            setUpdate(true)
            setId(row.id)
          }
        }>编辑</Button>
        </>
      )
    }
  },
 ]
 //表格的列数据
//增加商品分类的状态和方法
const [isModalOpen, setIsModalOpen] = useState(false);
const [isModalUpdate, setUpdate] = useState(false)
const handleCancel = () => {
  setIsModalOpen(false);
};
//增加商品分类的状态和方法
//修改点击商品的商品id
const [cateId, setId] =useState(-1)
//修改点击商品的商品id
  return (
    <div>
      <SearchBar handleSearch={handleSearch}/>
      <Button type="primary" onClick={() =>  {
        setIsModalOpen(true)
      }}>
        增加商品分类
      </Button>
      
          {/* 商品列表 */}
       <Table 
       rowKey='id'
       pagination ={{
        total,
        pageSize,
        current: page,
        showQuickJumper: true,
        position: ['bottomCenter'],
        onChange: paginationChange
       }} 
       scroll = {{
        y: 400
       }}
        dataSource={cates}
        columns={columns}/>
        {/* 商品列表 */}

        {/* 增加商品弹窗 */}
      <Modal title="增加商品分类" open={isModalOpen} footer={null} 
      onCancel={handleCancel}>
       <CateAdd/>
      </Modal>
      {/* 增加商品弹窗 */}

      {/* 修改商品分类 */}
      <Modal title="修改商品分类" open={isModalUpdate} footer={null} 
      onCancel={
        () => {
          setUpdate(false)
        }
      }>
      <CateUpdate cateId = {cateId}/>
      </Modal>
       {/* 修改商品分类 */}
    </div>
  )
}

export default CateLists
